import { useState, useEffect } from "react";
import { Form, InputNumber, Image } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { NumText } from "@/pages/OrderModule/common/components/CommonText";
import { CommonTable } from "@/pages/OrderModule/common/components/CommonTable";
const QuickPurchaseModal = ({ visible, selectedRows, handleCancel, records }) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [modal1Open, setModal1Open] = useState(false);
	const [list, setList] = useState(false);

	useEffect(() => {
		if (selectedRows.length > 0) {
			setList(selectedRows);
		} else {
			let list = [];
			list.push(records);
			setList(list);
		}
	}, [visible]);
	const columns = [
		{
			title: "图片",
			dataIndex: "skuImage",
			render: (value, record, i) => <Image src={value} />
		},
		{
			title: "供应商",
			dataIndex: "supplier"
		},
		{
			title: "商品名称",
			dataIndex: "skuName"
		},
		{
			title: "商品编码",
			dataIndex: "skuCode"
		},
		{
			title: "款式编码",
			dataIndex: "spuCode"
		},
		{
			title: "颜色规格",
			dataIndex: "skuSpec"
		},
		{
			title: "采购单价",
			render: value => value && <NumText as="s1" pre="¥" num={value} />,
			dataIndex: "skuPrice"
		},
		{
			title: "快速采购数量",
			dataIndex: "waitPickupcount",
			render: (text, record, index) => (
				<div>
					<InputNumber min={1} value={text} precision={0} onBlur={e => handleNumChange(e, record, index)} />
				</div>
			)
		}
	];
	const onOk = () => {
		form.validateFields().then(async value => {
			setModal1Open(true);
			// const { success } = await fmcgpurchasesAppointReceivingClerk({
			// 	pickerId: value.pickerId,
			// 	uniqueCode: codesArrayNum,
			// 	type: value.type
			// });
			// if (success) {
			// 	message.success("操作成功");
			// 	onCancel();
			// }
			// setLoading(false);
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};
	const handleNumChange = (e, record, index) => {
		const reg = /^[1-9]\d*$/;
		const val = e.target.value;
		if (reg.test(val)) {
			const arr = cloneDeep(goodsList);
			const obj = cloneDeep(record);
			obj.num = val;
			arr.splice(index, 1, obj);
			computeNum(arr);
			setGoodsList(arr);
		} else {
			message.info("请输入正整数");
		}
	};
	return (
		<CommonModal
			title={{ title: "批量采购" }}
			okText="确认采购并支付"
			visible={true}
			width="1100px"
			onOk={onOk}
			onCancel={onCancel}
			minHeight="150px"
		>
			<CommonTable rowKey="key" scroll={{ y: `calc(100vh - 250px)` }} dataSource={list} columns={columns} pagination={false} />
			<div className="mt20">
				采购总价:<span style={{ color: "rgba(240, 61, 41, 1)" }}>￥100</span>
			</div>
		</CommonModal>
	);
};

export default QuickPurchaseModal;
